<!-- 人数统计柱状图 -->
<template>
    <div class="content">
        <div id="left"></div>
        <div id="main"></div>
        <div id="right"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import {
    getAboutPersonnel,
    getAboutDepartment,
    getAboutClock,
    deptCount,
    attendanceCount
} from '@/api'
import { ElMessage } from 'element-plus'
let columnar;//第一个柱状图
let pie;//第一个饼状图
let piee;//第二个饼状图
onMounted(() => {
    // 挂载柱状图
     getAboutPersonnel().then(res => {
        const { season } = res.data.data;
        initColumnar(season, document.getElementById('left'));
        // console.log(res.data);
    }).catch(err => {
        ElMessage.error(err.message);
    })

    // 挂载第一个饼图
    deptCount().then(res => {
        const { data } = res.data;
        console.log(data);
        initPie(data, document.getElementById('main'));
    })

    // 挂载第二个饼图
    attendanceCount().then(res => {
        const { data } = res.data;
        console.log(data);
        initPiee(data, document.getElementById('right'));
    })
})

const setPieOptions=(title:string,data)=>{
    return {
        title: {
            text: title,
            // subtext: 'Fake Data',设置副标题
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data:data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
}


const initPie = (data, dom) => {
    pie = echarts.init(dom);
    const pieOptions = setPieOptions("部门人数统计",data);
    pie.setOption(pieOptions);
}

const initPiee = (data, dom) => {
    piee = echarts.init(dom);
    const pieOptions = setPieOptions("打卡次数",data);
    piee.setOption(pieOptions);
}

// 初始化柱状图
const initColumnar = (data, dom) => {
    columnar = echarts.init(dom);
    const options = {
        title: {
            text: '人员统计',
            left: 'center',
            top: "top"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            left: 'left',
            top: "5%"
        },
        // grid: {
        //     left: 'left',
        //     // right: '4%',
        //     top: '23%',
        //     containLabel: true
        // },
        xAxis: {
            data: data.map(item => item.name)
        },
        yAxis: {

        },
        series: [
            {
                name: '请假人数',
                type: 'bar',
                data: data.map(item => item.holiday)
            }, {
                name: '公司增加人数',
                type: 'bar',
                data: data.map(item => item.add)
            }
        ]
    }
    columnar.setOption(options);
}

</script>

<style lang="less" scoped>
.content {
    display: flex;
    justify-content: space-around;  
    padding: 10px;
    &>div{
        margin-left: 20px;
    width: 300px;
    height: 500px;
    }
}

#main {

}
</style>
